<template>
    <view class="content">
        <view v-if="identity == 4">
            <view class="top" :style="{paddingTop: statusBar + 5 + 'px'}">
                <image src="../../static/icon/logo.png" class="logo"></image>
                <!-- <u-swiper :list="swiperList" height="206" border-radius="20"></u-swiper> -->
                <image class="banner" :src="indexData.image"></image>
            </view>
            
            
            <view class="wrapper">
                <view class="dest">
                    <view class="dest-title">{{indexData.line}}</view>
                    <view class="u-flex" @click="showTime = true">
                        <view class="time-l">日期检索</view>
                        <view class="time-r">
                            <view>{{time}}</view>
                            <image src="../../static/icon/time.png" class="time-icon"></image>
                        </view>
                    </view>
                </view>
                
                <view class="box">
                    <view class="item">
                        <view class="item-top">
                            <view class="ld">零担</view>
                            <view class="u-p-t-10">
                                总件数<text class="u-p-l-15">{{indexData.zero_num}}件</text>
                            </view>
                            <view class="u-p-t-10">
                                总重量<text class="u-p-l-15">{{indexData.zero_weight}}斤</text>
                            </view>
                        </view>
                        <view class="down"></view>
                        <image src="../../static/image/index_02.png" class="img-01"></image>
                    </view>
                    
                    <view class="item i-bg">
                        <view class="item-top i-t-c">
                            <view class="bc">包车</view>
                            <view class="u-p-t-10">
                                总件数<text class="u-p-l-15">{{indexData.car_num}}件</text>
                            </view>
                            <view class="u-p-t-10">
                                总重量<text class="u-p-l-15">{{indexData.car_weight}}斤</text>
                            </view>
                        </view>
                        <view class="down d-bg"></view>
                        <image src="../../static/image/index_01.png" class="img-02"></image>
                    </view>
                </view>
            </view>
            
        </view>
        
        <view v-if="identity == 5">
            <image src="../../static/image/index.jpg" class="index-bg"></image>
            <view class="wrapper">
                <view class="dest">
                    <view class="dest-title">待卸货</view>
                    <view class="dhd">
                        <image src="../../static/icon/icon_01.png" class="icon-01"></image>
                        <view v-if="indexData">今日到货运单：{{ indexData.count || 0 }}</view>
                    </view>
                </view>
                
                <view class="unload" v-for="(item, index) in indexData.unload" :key="index">
                    <view class="u-flex">
                        <view class="car">车牌号</view>
                        <view>{{item.number}}</view>
                    </view>
                    <view class="unload-d">
                        <view>件数<text>{{item.all_num}}件</text></view>
                        <view>重量<text>{{item.all_weight}}斤</text></view>
                    </view>
                    <image src="../../static/image/index_02.png" class="img-01"></image>
                </view>
				
				<view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" 
					v-if="indexData&&indexData.unload&&indexData.unload.length == 0">暂无相关信息</view>
            </view>
            
            
            
            
            
            
        </view>
        
        
        
        
        <u-calendar v-model="showTime" :mode="modeDate" @change="change" max-date="2030-12-30"></u-calendar>
       
        
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#00457f" inactive-color="#5d5f6a" :border-top="true" @change="tabbarChange"></u-tabbar>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [],
                identity: '',//4发货 5卸货
                indexData:'',
                time:'',
                showTime:false,
                modeDate:'date',
                currDevice:null,
                state:0,
                isEditCmd:false,
                cmd:null,
                
                
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
            
            var today = new Date();
            var year = today.getFullYear();
            var month = ('0' + (today.getMonth() + 1)).slice(-2);
            var day = ('0' + today.getDate()).slice(-2);
            // var date = year + '-' + month + '-' + day;
            this.time = year+'-'+month+'-'+day
            
            
            
        },
        onShow() {
            // 身份
            uni.removeStorageSync('bleDevice')
            if(!this.$getTokens()){
                this.$gTo('/pages/login/login');
            }else{
                this.identity = this.$getSync('identity');
                this.tabbarInfo();
                this.index();
                
            }
            
            
            
        },
        methods: {
            // sousuoLanya(){
            //     if(uni.getStorageSync('bleDevice')){
            //         this.$gTo('/pages/escPage')
            //     }else{
            //         this.$gTo('/pages/search_bluetooth/search_bluetooth')
            //     }
            //     console.log(222222)
            // },
            // initPrint() {
            // 	this.showBleView = true
            // },
            //首页数据
            index(){
                this.$ajax('index', {
                    user_token:this.$getTokens(),
                    date:this.time
                }).then(ret => {
                	if (ret.success == 1000) {
                        if(ret.detail){
                            this.indexData = ret.detail
                        }else{
                            this.$toast(ret.msg);
                        }
                        
                	} else {
                		this.$toast(ret.msg);
                	}
                    
                });
            },
            
            //选择日历
            change(e){
                console.log(e)
                this.time = e.result
                this.index()
            },
            toPage(url) {
                this.$gTo(url)
            },
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            tabbarInfo(){
                // 发货
                if (this.$getSync('identity') == 4) {
                    if(this.$getSync('authority_car') == 1){
                        this.tab_list = [
                            {
                                iconPath: "/static/icon/tab_01.png",
                                selectedIconPath: "/static/icon/tab_02.png",
                                text: '首页',
                                pagePath: "/pages/tabbar/index"
                            },{
                                iconPath: "/static/icon/tab_03.png",
                                selectedIconPath: "/static/icon/tab_04.png",
                                text: '找车',
                                pagePath: "/pages/tabbar/tab-2"
                            },{
                                iconPath: "/static/icon/tab_05.png",
                                selectedIconPath: "/static/icon/tab_06.png",
                                text: '发货',
                                pagePath: "/pages/tabbar/tab-3"
                            },{
                                iconPath: "/static/icon/tab_07.png",
                                selectedIconPath: "/static/icon/tab_08.png",
                                text: '下单',
                                pagePath: "/pages/tabbar/tab-4"
                            },{
                                iconPath: "/static/icon/tab_09.png",
                                selectedIconPath: "/static/icon/tab_10.png",
                                text: '我的',
                                pagePath: "/pages/tabbar/mine"
                            }
                        ];
                    }else{
                        this.tab_list = [
                            {
                                iconPath: "/static/icon/tab_01.png",
                                selectedIconPath: "/static/icon/tab_02.png",
                                text: '首页',
                                pagePath: "/pages/tabbar/index"
                            },{
                                iconPath: "/static/icon/tab_05.png",
                                selectedIconPath: "/static/icon/tab_06.png",
                                text: '发货',
                                pagePath: "/pages/tabbar/tab-3"
                            },{
                                iconPath: "/static/icon/tab_07.png",
                                selectedIconPath: "/static/icon/tab_08.png",
                                text: '下单',
                                pagePath: "/pages/tabbar/tab-4"
                            },{
                                iconPath: "/static/icon/tab_09.png",
                                selectedIconPath: "/static/icon/tab_10.png",
                                text: '我的',
                                pagePath: "/pages/tabbar/mine"
                            }
                        ];
                    }
                   
                }
                // 卸货
                if(this.$getSync('identity') == 5){
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '首页',
                            pagePath: "/pages/tabbar/index"
                        },{
                            iconPath: "/static/icon/tab_11.png",
                            selectedIconPath: "/static/icon/tab_12.png",
                            text: '扫码卸车',
                            pagePath: "/pages/tabbar/tab-2"
                        },{
                            iconPath: "/static/icon/tab_09.png",
                            selectedIconPath: "/static/icon/tab_10.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/mine"
                        }
                    ];
                }
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #ffffff;
    }
    .banner{
        height:206rpx ;
    }
    .top{
        background-color: #00457f;
        padding: 30rpx 30rpx 80rpx;
    }
    .logo{
        width: 296rpx;
        height: 91rpx;
        margin-bottom: 25rpx;
    }
    
    .wrapper{
        background-color: #ffffff;
        border-radius: 30rpx 30rpx 0 0;
        padding: 40rpx 30rpx;
        margin-top: -50rpx;
    }
    .dest{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 45rpx;
    }
    .dest-title{
        font-size: 36rpx;
        font-weight: bold;
        flex: 1;
    }
    .time-l{
        font-size: 24rpx;
        color: #737373;
        padding-right: 10rpx;
    }
    .time-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15rpx;
        background-color: #f8f8f8;
        border-radius: 15rpx;
        font-size: 24rpx;
    }
    .time-icon{
        width: 25rpx;
        height: 25rpx;
        margin-left: 15rpx;
    }
    
    .box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item{
        width: 335rpx;
        background: linear-gradient(to bottom, #cde9ff, #eef8ff);
        border-radius: 20rpx;
        margin-bottom: 35rpx;
        overflow: hidden;
        position: relative;
    }
    .i-bg{
        background: linear-gradient(to bottom, #def5ff, #f4fcfe);
    }
    .item-top{
        padding-top: 50rpx;
        padding-bottom: 70rpx;
        padding-left: 30rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #003e72;
    }
    .i-t-c{
        color: #004761;
    }
    .ld{
        width: 80rpx;
        height: 45rpx;
        background-color: #0b75c4;
        border: 2rpx solid #fff;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-weight: normal;
        color: #fff;
        line-height: 45rpx;
        text-align: center;
    }
    .bc{
        width: 80rpx;
        height: 45rpx;
        background-color: #24adcf;
        border: 2rpx solid #fff;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-weight: normal;
        color: #fff;
        line-height: 45rpx;
        text-align: center;
    }
    .down{
        width: 100%;
        height: 37rpx;
        background: linear-gradient(to left, #fdfeff, #c2dff7);
    }
    .d-bg{
        background: linear-gradient(to left, #f1fafd, #ddf1f9);
    }
    .img-01{
        width: 98rpx;
        height: 93rpx;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .img-02{
        width: 90rpx;
        height: 94rpx;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    
    
    
    
    // 卸货端
    .index-bg{
        width: 750rpx;
        height: 505rpx;
        position: relative;
        z-index: -1;
    }
    .dhd{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13rpx 18rpx;
        background-color: #f4f6fc;
        border-radius: 50rpx;
        font-size: 24rpx;
        color: #3686ff;
    }
    .icon-01{
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
    }
    .unload{
        background: linear-gradient(to bottom, #cde9ff, #eef8ff);
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        overflow: hidden;
        position: relative;
        font-size: 28rpx;
        color: #003e72;
    }
    .car{
        padding: 6rpx 10rpx;
        background-color: #0b75c4;
        border: 2rpx solid #fff;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-weight: normal;
        color: #fff;
        margin-right: 15rpx;
    }
    .unload-d{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 15rpx;
    }
    .unload-d>view{
        width: calc(630rpx / 2);
    }
    .unload-d>view>text{
        padding-left: 25rpx;
        font-weight: bold;
    }
    






	.ly-cass-box{
		width: 150rpx;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		bottom:70rpx;
		right: 50rpx;
		z-index: 500;
	}
	.ly-cass{
		width: 120rpx;
		height: 120rpx;
		background-color: #f4f4f5;
		border-radius: 50%;
        display: flex;
		align-items: center;
		justify-content: center;
	}
	.ly-text{
	  margin-top: 20rpx;
	  background-color: #eee;
	  padding: 2rpx 8rpx 2rpx 8rpx;
	  border-radius: 6rpx;
	  font-size: 25rpx;
	}
	
 
 	.no-open-gps-tip {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #fa3534;
		font-weight: 400;
		font-size: 30rpx;
		background: rgba(235, 207, 48, 0.8);
		padding: 30rpx;
	}
	.devices-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		align-items: flex-end;
		padding-bottom: 5rpx;
		border-bottom: 1px solid #f4f4f5;
	}
 
	.devices-list {
		width: 100%;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
 
	}
 
	.tip-search {
		width: 100%;
		margin: 20rpx 0;
		text-align: left;
		font-size: 16px;
		color: #2979ff;
	}
 
	.has-devices-list-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin: 30rpx 0;
	}
 
 
 
</style>
